<template>
  <div class="root" :style="{marginBottom:marginBottom+'px'}">

    <div ref="navbar" :class="{navbar:true, layer:isLayer,bg:bg}" :style="navbarStyle">
      <div class="flex">
        <div class="flex-item logo">
          <img src="~/static/logo.png">
          <h2 class="name">Simple社区</h2>
        </div>
        <div class="flex-item menu">

          <template v-for="item in nabvar">

            <el-dropdown class="item" v-if="item.nodes.length>0">

              <el-link>{{ item.name }} <i class="el-icon-arrow-down el-icon--right"></i></el-link>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="node in item.nodes" :key="node.name">
                  <a :href="node.url" v-text="node.name" :target="node.target===1?'_blank':''"></a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <template v-else>
              <a v-if="item.url.indexOf('http')===0" :href="item.url" v-text="item.name"
                 :target="item.target===1?'_blank':''"></a>
              <nuxt-link v-else :to="item.url" class="item" v-text="item.name"
                         :target="item.target===1?'_blank':''"></nuxt-link>
            </template>
          </template>


        </div>
        <div class="flex-item post" v-if="$store.state.user">
          <nuxt-link class="el-button el-button--primary el-button--small" :to="{name:'post-topic'}">
            <i class="el-icon-edit"></i>
            <span>提问</span>
          </nuxt-link>
        </div>
        <div class="flex-item search">
          <nuxt-link to="/search">
            <i class="el-icon-search"></i>
            <span>搜索</span>
          </nuxt-link>
        </div>

        <div class="flex-item user">
          <el-dropdown v-if="$store.state.user">

            <el-link>
              <el-badge :value="unreadCount>0?unreadCount:''">
                <el-avatar :size="15" :src="$store.state.user.avatar"></el-avatar>
              </el-badge>
              <span>
              {{ $store.state.user.name }} <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            </el-link>
            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item>
                <nuxt-link :to="{name:'profile-posts',params:{id:$store.state.user.id,page:1}}"><i
                  class="el-icon-user"></i>我的主页
                </nuxt-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <nuxt-link :to="{name:'my-settings'}"><i class="el-icon-edit-outline"></i>修改资料</nuxt-link>
              </el-dropdown-item>

              <el-dropdown-item divided>
                <nuxt-link :to="{name:'my-order'}"><i class="el-icon-tickets"></i>我的订单</nuxt-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <nuxt-link :to="{name:'my-invitation'}"><i class="el-icon-chat-line-square"></i>
                  <el-badge :value="unreadCount>0?unreadCount:''">
                    邀请我回答
                  </el-badge>
                </nuxt-link>
              </el-dropdown-item>

              <el-dropdown-item divided>
                <el-link @click="$parent.showLogin()"><i class="el-icon-sort"></i>切换账号</el-link>
              </el-dropdown-item>
              <el-dropdown-item>

                <el-link @click="logout()"><i class="el-icon-circle-close"></i>退出登录</el-link>
              </el-dropdown-item>
            </el-dropdown-menu>

          </el-dropdown>
          <el-link v-else @click="$parent.showLogin()">注册/登录</el-link>
        </div>
      </div>

    </div>
    <style v-if="fixed">
      .navbar {
        --color: #FFF;
      }

      .el-link.el-link--default {
        color: #FFF;
      }

      .navbar .el-dropdown-menu a, .navbar .el-dropdown-menu .el-link--inner {
        color: #606266;
      }
    </style>

  </div>
</template>

<script>
import cookie from "@/utils/cookie";
import api from "@/utils/api";

export default {
  name: "Header",
  components: {},
  watch: {
    fixed(val) {
      if (!val) {
        this.bg = false;
      }
    }
  },
  computed: {
    navbarStyle() {
      if (this.fixed) {

        return {
          'background-color': 'transparent',
          'color': '#FFFFFF'
        }
      }
      return {}
    },
    marginBottom() {
      if (this.layer) {
        return this.height;
      } else {
        return 0;
      }
    },
    nabvar() {
      //从store里面读取服务端初始化好了的数据
      return this.$store.state.navbar;
    },
    isLayer() {
      return this.fixed || this.layer;
    }
  },
  data() {
    return {
      layer: false,
      height: 0,
      bg: false,
      fixed: false,
      unreadCount: 0
    }
  },
  created() {
    let self = this;
    if (self.$store.state.user) {
      api.getUserInvitationCount().then(res => self.unreadCount = res);
    }
  },
  methods: {
    getScrollTop() {
      var scroll_top = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
        scroll_top = document.documentElement.scrollTop;
      } else if (document.body) {
        scroll_top = document.body.scrollTop;
      }
      return scroll_top;
    },
    logout() {
      let self = this;

      this.$confirm('您确定要退出登录吗？', '提示', {
        type: 'warning'
      }).then(() => {

        //调用api 注销token
        let token = cookie.getCookie('token');
        //删除token
        cookie.delCookie('token');
        //删除状态
        self.$store.commit('logout');

        api.userLogout(token).then(data => {

          if (data.code === 1) {
            self.$message.success('您已经成功退出登录!');
            console.log('退出登录成功');
          }
        });
        //提示

      }).catch(() => {


      });
    }
  },
  mounted() {

    let self = this;
    self.height = self.$refs.navbar.clientHeight;

    function handler() {
      let top = self.getScrollTop();
      if (self.fixed) {
        self.bg = top >= self.$refs.navbar.clientHeight;
        return;
      }
      self.layer = top > 0;
    }

    window.addEventListener("scroll", handler);
    handler();

  }
}
</script>

<style scoped lang="less">
.logo {
  flex: 1;
}

.logo, .logo img {
  width: 45px;
  height: 45px;
}

.name {
  font-size: 18px;
  color: var(--color);
  font-weight: 400;
  margin-left: 10px;
}

.menu {
  flex: 5;
}

.menu a {
  margin-right: 30px;
}

.user {
  flex: 1;
}

.link {
  font-size: 12px;
  background-color: var(--top-bar);
}

a {
  margin-right: 30px;
}

a:last-child {
  margin-right: 0px;
}

.navbar {
  /*display: flex;*/
  /*align-items:center;*/
  justify-content: center;
  position: relative;
  z-index: 9;
  background-color: var(--navbar-bg);
  padding: 10px;
  //transition: all 0.3s;

  .item {
    width: 100px;
    text-align: center;
  }

  .search {
    flex: 0 0 100px;
    text-align: center;
    justify-content: center;
  }
}

.layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--border-color);
  z-index: 99;
}

.bg {
  background-color: #000 !important;
  color: #fff;
}

.post {
  flex: 0 0 100px;
  justify-content: center;

  a {
    color: #FFF !important;
  }
}
</style>
